<template>
	<view>
		
		<!-- <view class="lists" v-for="(item,index) in tests" style="" >
			<view :class="item.title.length >= 16 ? 'titles' : 'titles2'"  @click="newvideo(item)">
				{{item.title}}
			</view>
			<u-album bigimg="1" :urls='item.images' v-if="item.images.length > 1"  multipleSize="110" space="3" @albumWidth="width => albumWidth = width" ></u-album>
			<image v-if="item.coverUrl != null" :src=item.coverUrl mode="" class="images"  @click="newvideo(item)"></image>
			<image  v-else :src=item.stringList[0] mode="" class="images"  @click="newvideo(item)"></image>
			<u-button type="warning" text="删除" @click="items(item,index)"></u-button>
		</view> -->
		<view  v-for="(item,index) in tests" class="lists">
			<view class="listleft">
				<image :src=item.coverUrl mode="" class="images"  @click="newvideo(item)"></image>
			</view>
			<view class="listright"> 
				<view class="righttitle" @click="newvideo(item)">{{item.title}}</view>
				<view class="rightcenter" @click="newvideo(item)">{{item.description}}</view>
				<view class="rightbottom" >
					<view class="bottomtime" @click="newvideo(item)">{{item.gmtCreate | times}}</view>
					<view class="bottomdel" @click="items(item,index)">
						<image src="../../../static/tabsIcon/delete.png" mode="" style="width: 40upx;height: 40upx;" ></image>
						<view style="font-size: 30upx;color: #999999;">删除</view>
					</view>
					<!-- <view class="bottomdel2" @click="top(item,index)" v-if="item.isTop == 0">
						<image src="../../../static/tabsIcon/top.png" mode="" style="width: 40upx;height: 40upx;" ></image>
						<view style="font-size: 30upx;color: #999999;">置顶</view>
					</view>
					<view class="bottomdel2" @click="notop(item,index)" v-if="item.isTop == 1">
						<image src="../../../static/tabsIcon/notop.png" mode="" style="width: 40upx;height: 40upx;" ></image>
						<view style="font-size: 30upx;color: #999999;">取消置顶</view>
					</view> -->
				</view>
			</view>
		</view>
		
<!-- 		<u-scroll-list style="padding-left: calc(2.5% + 10upx);">
		        <view class="videos" v-for="(item,index) in leslists"  >
		        	<image class="videoimg" :src=item.image mode="" style="" @click="newvideo()"></image>
		        	<view class="videotext" style="" @click="newvideo()">
		        		{{item.title}}
		        	</view>
		        	<view class="videopeople">
		        		<view class="heads">
		        			<image :src='item.head' mode="" class="headsimg"></image>
		        		</view>
		        		<view class="names" >{{item.name}}</view>
		        		<u-icon class="ic" v-if="item.zan == 0" name="thumb-up" size="24" @click="zan(item)"></u-icon>
		        		<u-icon class="ic" v-if="item.zan == 1" name="thumb-up-fill" size="24" color="#FFB22F" @click="zan(item)"></u-icon>

						<view class="nums" v-if="item.zans < 10000" >{{item.zans}}</view>
						<view class="nums" v-if="item.zans >= 10000" >{{Number(item.zans/10000).toFixed(0)}}w+</view>
		        	</view>
		        </view>
		</u-scroll-list> -->
		
		
		
<!-- 		<view class="lists" v-for="(item,index) in tests" v-if="index >= 2" style="" @click="newvideo()">
			<view :class="item.title.length >= 16 ? 'titles' : 'titles2'">
				{{item.title}}
			</view>
			<u-album bigimg="1" :urls='item.images' v-if="item.images.length > 1"  multipleSize="110" space="3" @albumWidth="width => albumWidth = width" ></u-album>
			<image :src="item.images[0]" v-if="item.images.length == 1" mode="" class="images"></image>
		</view> -->
		<u-modal :closeOnClickOverlay='true' :show="showdel" title="是否删除文章" :content='content' :showCancelButton='true' @cancel='() => showdel = false' @confirm='delfile' @close="() => showdel = false"></u-modal>
	</view>
</template>

<script>
	let timer=null
	import {
		articledel,
		articletop,
		articlenotop
	} from '@/api/community'
	import {
		filelist
	} from '@/api/minefile'
	export default {
		data() {
			return {
				
				leslists: [],
				circles:{
					pageSize:8,
					pageNum:1,
					// type:1,
					// title:null,
				},
				albumWidth: 0,
				list3: [
				],
				 urls1: [
				],
				urls2: [
				],
				tests:[
				],
				content:'是否删除当前发布的文章',
				showdel:false,
				itemid:null,
				indexid:null,
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		created() {
		},mounted(){
			 this.circlelist();
		},
		onPullDownRefresh(){
			this.leslists = [];
			this.circles.pageSize = 8;
			this.circles.pageNum = 1;
			console.log("0000000")
			this.circlelist();
				// type:1,
				// title:null,
		},
		onReachBottom() {
		            //阻止重复加载
		            if(timer !== null){
		                clearTimeout(timer)
		            }
					this.circles.pageNum++;
		            timer=setTimeout(()=>this.circlelist(),500)
		            // this.getMoreNews()
		},
		methods: {
			top(item,index){
				let ids = {
					id:item.id
				}
				articletop(ids).then(res => {
					if(res.success == 1){
						uni.showToast({
							title: '置顶成功',
							icon:'success',
							duration: 2000
						});
						this.tests = [];
						// this.leslists = [];
						setTimeout(()=>{
							this.circlelist();
						}, 0)
						
						// this.tests.splice(this.indexid,1);
						// this.showdel = false;
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			notop(item,index){
				let ids = {
					id:item.id
				}
				articlenotop(ids).then(res => {
					if(res.success == 1){
						uni.showToast({
							title: '置顶成功',
							icon:'success',
							duration: 2000
						});
						this.tests = [];
						// this.leslists = [];
						setTimeout(()=>{
							this.circlelist();
						}, 0)
						// this.tests.splice(this.indexid,1);
						// this.showdel = false;
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			items(item,index){
				this.itemid = item.id;
				this.indexid = index;
				this.showdel = true;
			},
			delfile(){
				articledel(this.itemid).then(res => {
					if(res.success == 1){
						uni.showToast({
							title: '删除成功',
							icon:'success',
							duration: 2000
						});
						this.tests.splice(this.indexid,1);
						this.showdel = false;
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			circlelist() {
				filelist(this.circles).then(res => {
					if(res.data.records.length != 0){
						for(let sss in res.data.records){
							this.tests.push(res.data.records[sss])
						}
						// this.circles.pageNum++;
					}else{
						this.circles.pageNum--;
						uni.showToast({
							title: '无更多内容',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			newvideo(item){
				// if(item.typeVideo == 1){
				// 	uni.navigateTo({
				// 		url: '/pages/community/content?id='+item.id+'&type='+'0',
				// 	});
				// }else if(item.typeVideo == 0){
					uni.navigateTo({
						url: '/pages/community/video/video?id='+item.id,
					});
				// }
			},
			zan(item){
				if(item.zan == 0){
					item.zan = 1;
					item.zans++;
				}else{
					item.zan = 0;
					item.zans--;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color:transparent;
	}
	.tests{
		height: 280upx;
		padding-top: 20upx;
		// background-image: url(../../static/tabsIcon/shequbg.jpg);
	}
	.lists{
		width: 95%;
		margin: 10upx auto;
		// padding: 0 20upx;
		// height: 200upx;
		background-color: #FFFFFF;
		display: flex;
		.listleft{
			width: 30%;
			height: 200upx;
			margin: 10upx 20upx;
			
			.images{
				width: 220upx;
				height: 200upx;
				border-radius: 20upx;
			}
		}
		.listright{
			width: 70%;
			margin: 20upx;
			.righttitle{
				font-size: 38upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}
			.rightcenter{
				height: 80upx;
				// background-color: #0273F1;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-top: 10upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				opacity: 1;
			}
			.rightbottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.bottomtime{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					opacity: 1;
					
				}
				.bottomdel{
					display: flex;
					
					// background-color: #007AFF;
				}
				.bottomdel2{
					display: flex;
					width: 160upx;
					// background-color: #007AFF;
				}
			}
		}
	}
	.titles{
		width: 100%;
		height: 120upx;
		font-size: 32upx;
		line-height: 60upx;
		// background-color: #1467FF;
	}
	.titles2{
		width: 100%;
		height: 120upx;
		line-height: 120upx;
		// background-color: #5AC725;
	}
	
	
	.videos {
		display: flex;
		float: left;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		width: 100%;
		height: 700upx;
		margin: 2%;
		background-color: #FFFFFF;
		border-radius: 40upx;
		// overflow: hidden;
	}
	
	.videoimg {
		// position: relative;
		height: 500rpx;
		width: 300upx;
		border-radius: 40upx 40upx 0 0;
		// background-color: #1467FF;
	}
	
	.videotext {
		position: relative;
		height:110rpx;
		width: 90%;
		margin: 0 auto;
		// overflow: hidden;
		// /*超出部分隐藏*/
		// white-space: nowrap;
		// /*不换行*/
		// text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
		line-height: 60rpx;
		font-size: 28upx;
	}
	
	.videopeople {
		position: relative;
		display: flex;
		height: 90upx;
		width: 100%;
	}
	.heads{
		text-align: center;
		 width: 23%;
		 line-height: 90upx;
		
		 // background-color: #1467FF;
	}
	.headsimg{
		top: 15upx;
		width: 60upx;
		height: 60upx;
		border-radius: 999rem;
	}
	.names{
		width: 40%;
		// background-color: #5AC725;
		font-size: 20upx;
		line-height: 90upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
	}
	.ic{
		width: 12%;
		margin-right: 0;
		right: 0;
		// background-color: #1467FF;
	}
	.nums{
		width: 24%;
		font-size: 24upx;
		line-height: 90upx;
		text-align: center;
		// background-color: #BEF5C8;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
	}
</style>
